<template>
  <div class="container">

    <div v-if="!showView">
      <el-row justify="center">
        <el-col :xs="18" :sm="18" :md="5" :lg="5" :xl="5">
          <div style="height:90vh;display: flex;flex-direction: column;justify-content: space-between">
            <div>
              <div style="margin-top:10vh;text-align: left;margin-bottom: 10px;font-size:  25px;font-weight: bold">
                您好！
              </div>
              <div style="text-align: left;margin-bottom: 30px;font-size:  25px;font-weight: bold">
                欢迎来到宠之语
              </div>

              <div style="text-align: left;margin-bottom: 10px;font-size:  12px;font-weight: bold">
                请输入对应管理员密码
              </div>
              <el-input
                  v-model="adminPassword"
                  placeholder="输入密码"
                  size="large"
              >
                <template #append>
                  <el-button :icon="CheckIcon" @click="checkPwd"/>
                </template>
              </el-input>

            </div>

            <el-image style="width: 100%;" :src="src" fit="fill"/>

          </div>
        </el-col>
      </el-row>
    </div>
    <div v-else>
      <el-menu
          :default-active="'1'"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          @select="()=>{}"
      >
        <el-menu-item index="1">设备管理</el-menu-item>
        <el-menu-item index="3" disabled>Info</el-menu-item>
        <el-menu-item index="4">客户端管理(未开放)</el-menu-item>
      </el-menu>
      <div class="devices-box">
        <div class="device-box" v-for="(value,key,index) in data.devices" :key="index">
          <div class="msg-box">
            <div>{{ key }}</div>
            <div style="font-size:15px;font-weight:bold;display:flex;align-items:center">
              {{ value.token }}
              <el-icon style="margin-left: 10px" @click="copyToken(value.token)" color="#fff" size="17">
                <DocumentCopy/>
              </el-icon>
            </div>
          </div>
          <el-icon style="position: absolute;top: 10%;right: 10%;" size="30" color="#c45656" @click="changeToken(key)">
            <Refresh/>
          </el-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {reactive, toRefs} from "vue";
import {DocumentCopy, Refresh} from "@element-plus/icons";
import {Check} from '@element-plus/icons-vue'
import {ElMessage, ElMessageBox, ElNotification} from "element-plus";
import {sendAdmingPassword, changeDeviceToken} from "@/api/role";

export default {
  name: "adminView",
  components: {
    DocumentCopy, Refresh
  },
  setup() {
    const state = reactive({
      adminPassword: "",
      src: require("@/assets/admin-bg.png"),
      showView: false,
      curTime: null,
      isShowPlay: false,
      data: null,
    })

    const checkPwd = async () => {
      if (!state.adminPassword) {
        ElNotification({
          title: '提示',
          message: "令牌不能为空",
          type: 'warning',
        })
      } else {
        //密码输入有误，请确认令牌是否正确
        const {data} = await sendAdmingPassword({password: state.adminPassword})
        if (data) {
          ElNotification({
            title: '恭喜!',
            message: "连接成功,不要刷新哦，请稍等...",
            type: 'success',
          })
          state.showView = true
          state.data = data
        } else {
          ElNotification({
            title: '提示',
            message: "密码有误请再次尝试",
            type: 'warning',
          })
        }
      }
    }

    const changeToken = (deviceName) => {
      ElMessageBox.confirm(
          '确认要更新设备密码吗?',
          '警告',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          }
      )
          .then(async () => {
            const res = await changeDeviceToken({deviceName})
            console.log(res)
            ElMessage({
              type: 'success',
              message: '更新成功',
            })
            setTimeout(async () => {
              //密码输入有误，请确认令牌是否正确
              const {data} = await sendAdmingPassword({password: state.adminPassword})
              state.data = data
            }, 2000)
          }).catch(() => {
        console.log("已取消")
      })

    }

    const copyToken = (token) => {
      navigator.clipboard.writeText(token).then(() => {
        console.log('复制成功！');
        ElMessage({
          showClose: true,
          message: '复制验证码成功',
          type: 'success',
        })
      }).catch(err => {
        console.log('复制失败！', err);
      });
    }

    return {
      ...toRefs(state), CheckIcon: Check, checkPwd, changeToken, copyToken
    }
  }
}
</script>


<style scoped>
.container {
  font-family: 'Arial', sans-serif;
  color: #333;
}

.device-box {
  width: 45%;
  height: 35vh;
  background: url('../assets/monitor.png') 100% 100% no-repeat;
  background-size: cover;
  border-radius: 25px 0 25px 25px;
  display: flex;
  flex-direction: column-reverse;
  position: relative;
}

.devices-box {
  width: calc(100% - 20px);
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  maring-top: 20px
}

.msg-box {
  width: calc(100% - 15px);
  height: calc(30% - 10px);
  background: #000000d1;
  border-radius: 25px 0 25px 25px;
  display: flex;
  flex-direction: column;
  align-items: start;
  color: #fff;
  font-size: 12px;
  justify-content: space-evenly;
  padding: 5px 0 5px 15px;
  letter-spacing: 1px;
}
</style>